<template>
	<view>
		<view class="wrapper">
			<yjy-switch
				style="width:160upx;height: 54upx;margin-top: 45upx;margin-left:4%;"
			    @switchFunction="switchChangeFun"
			    :switchType="'text'"
			    :defaultColor="'#FF4B4B'"
			    :highColor="'#FFFFFF'"
			    :defaultValue="switchDefaultValue"
			    :switchList="switchListText"
			    :itemIndex="0"></yjy-switch>
			<image class="icon" src="@/static/image/zuo.png" style="width: 30px;height:30px;margin-top: 50upx;margin-left:4%;" @click="clickLeft"></image>
			<view class="wrapper-child" style="margin-left: 4%;width: 35%;" v-if="switchDefaultValue==1">
				<picker mode="date" fields='month' @change="changeMonth" class="picker1">
					<view class="uni-input txt_s">{{value_month}}</view>
				</picker>
			</view>
			<view class="wrapper-child" style="margin-left: 4%;width: 35%;" v-if="switchDefaultValue==0">
				<picker mode="date" fields='year' @change="changeYear" class="picker1">
					<view class="uni-input txt_s">{{value_year}}</view>
				</picker>
			</view>
			<image class="icon" src="@/static/image/you.png" style="width: 30px;height:30px;margin-top: 50upx;margin-left:4%;" @click="clickRight"></image>
			<view class="wrapper-child" style="margin-left: 4%;width: 99%;margin-top:0;margin-bottom: 0;">
				<radio-group @change="radioChange">
					<label class="radio"><radio value="支出" checked="true" />支出</label>
					<label class="radio"><radio value="收入" />收入</label>
					<label class="radio"><radio value="借出" />借出</label>
					<label class="radio"><radio value="借入" />借入</label>
				</radio-group>
			</view>
			<view class="wrapper-child" style="margin-left: 4%;margin-top:0;margin-bottom: 0;">
				<picker style="height: 42px;border-radius: 20px;text-align:center;line-height: 42px;background-color: rgb(142, 199, 86);color:white;width: 500upx;"
				 @change="bindPickerChange" :value="index" :range="options">
					<view class="uni-input">{{options[index]}}</view>
				</picker>
			</view>
			<!-- <view class="wrapper-child" style="margin-left: 4%;width: 35%;">
				<picker mode="date" fields='day' @change="startTime" class="picker1">
					<view class="uni-input txt_s">{{value_startTime}}</view>
				</picker>
			</view>
			<view class="wrapper-child" style="width: 35%;">
				<picker mode="date" fields='day' @change="endTime" class="picker1">
					<view class="uni-input txt_s">{{value_endTime}}</view>
				</picker>
			</view> -->
			<!-- <button class="btn wrapper-child" style="width: 20%;background-color: rgb(115 185 45);color:white;border-radius: 50px;"
			 @click="flushChart">OK</button> -->
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">{{value_szlx}}分布图</view>
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="canvasId" id="canvasId" class="charts" @touchstart="touchPie"></canvas>
			</view>
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">{{value_szlx}}明细</view>
			</view>
			<view class="qiun-charts">
				<div style="padding: 10px;">
					合计{{value_szlx}}{{textDate.total}}元<br/><br/>
					排名前三的类别共{{value_szlx}}{{textDate.lbpm}}<br/><br/>
					排名前五的共{{value_szlx}}{{textDate.zcpm}}。
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'
	import yjySwitch from "@/components/yjy-switch/yjy-switch.vue"
	var canvaPie = null;
	export default {
		components: {
			yjySwitch
		},
		data() {
			return {
				//value_startTime: '选择起始日期',
				//value_endTime: '选择结束日期',
				cWidth: '',
				cHeight: '',
				textDate:{},
				value_month:'选择年月',
				value_year:'选择年度',
				value_szlx:'支出',
				switchDefaultValue: 1,
				switchListText: [{
						title: '按年',
						value: 0
					},
					{
						title: '按月',
						value: 1
					}
				],
				options:[],
				index:0
			}
		},
		onPullDownRefresh() {
			this.flushChart();
		},
		onLoad() {
			let _self = this;
			this.$http.get('/bills/types').then(res => {
				this.options = res.data.data;
				this.options.unshift("全部");
			});
			let chartData = this.chartData;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			var date = new Date();
			var year = date.getYear() + 1900;
			var month = date.getMonth() + 1;
			this.value_month = year + '-' + month;
			this.value_year = year;
			this.flushChart();
		},
		methods: {
			/* startTime(res) {
				this.value_startTime = res.detail.value;
			},
			endTime(res) {
				this.value_endTime = res.detail.value;
			}, */
			bindPickerChange(e) {
				this.index = e.target.value;
				this.flushChart();
			},
			changeMonth(res){
				this.value_month = res.detail.value;
				this.flushChart();
			},
			changeYear(res){
				this.value_year = res.detail.value;
				this.flushChart();
			},
			radioChange(evt){
				this.value_szlx = evt.target.value;
				this.flushChart();
			},
			switchChangeFun(e) {
			   this.switchDefaultValue = e.swithcSelectItem.value;
			   this.flushChart();
			},
			clickLeft(){
				if(this.switchDefaultValue==0){
					// 按年
					this.value_year = this.value_year - 1;
				}else{
					// 按月
					let mon = this.value_month;
					let monarr = mon.split("-");
					let ya = parseInt(monarr[0]);
					let ma = parseInt(monarr[1]);
					if(ma>1){
						ma = ma-1;
					}else{
						ma = 12;
						ya = ya-1;
					}
					this.value_month = ya+'-'+ma;
				}
				this.flushChart();
			},
			clickRight(){
				if(this.switchDefaultValue==0){
					// 按年
					this.value_year = this.value_year + 1;
				}else{
					// 按月
					let mon = this.value_month;
					let monarr = mon.split("-");
					let ya = parseInt(monarr[0]);
					let ma = parseInt(monarr[1]);
					if(ma<12){
						ma = ma+1;
					}else{
						ma = 1;
						ya = ya+1;
					}
					this.value_month = ya+'-'+ma;
				}
				this.flushChart();
			},
			flushChart() {
				this.$http.get("/bills/textDate?month=" + this.value_month + "&year=" + this.value_year+"&st="+this.switchDefaultValue+"&szlx="+this.value_szlx+"&type="+this.options[this.index]).then(res => {
					this.textDate = res.data.data;
				});
				this.$http.get("/bills/chart1_data?month=" + this.value_month + "&year=" + this.value_year+"&st="+this.switchDefaultValue+"&szlx="+this.value_szlx+"&type="+this.options[this.index]).then(res => {
					canvaPie = new uCharts({
						$this: this,
						canvasId: 'canvasId',
						type: 'pie',
						fontSize: 11,
						legend: {
							show: false
						},
						background: '#FFFFFF',
						pixelRatio: 1,
						series: res.data.data,
						animation: true,
						width: this.cWidth,
						height: this.cHeight,
						dataLabel: true,
						extra: {
							pie: {
								labelWidth: 15
							}
						},
					});
					uni.stopPullDownRefresh();
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style scoped>
	.picker1 {
		color: rgb(115 185 45);
		height: 42px;
		border-radius: 20px;
		width: 95%;
		text-align: center;
		line-height: 42px;
		background: white;
		border: 1px solid rgb(115 185 45);
	}

	.wrapper {
		display: flex;
		flex-direction: row;
		width: 750rpx;
		align-content: flex-start;
		flex-flow: wrap;
	}

	.wrapper-child {
		box-sizing: border-box;
		height: 88rpx;
		align-items: center;
		margin-bottom: 30rpx;
		margin-top: 20px;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
